<template>
  <div class="banenr-container">
    <el-form
      ref="formRef"
      label-position="right"
      label-width="100px"
      :model="ruleForm"
      style="max-width: 460px"
      :rules="rules"
    >
      <el-form-item label="alt" prop="alt">
        <el-input v-model="ruleForm.alt" />
      </el-form-item>
      <el-form-item label="link" prop="link">
        <el-input v-model="ruleForm.link" />
      </el-form-item>
      <el-form-item>
        <el-upload
          class="upload-demo"
          :http-request="httpRequest"
          :show-file-list="false"
        >
          <el-image v-if="imageUrl" :src="imageUrl"></el-image>
          <el-icon v-else><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="img" prop="img">
        <el-input v-model="ruleForm.img" disabled />
      </el-form-item>
      <el-form-item>
        <el-button size="large" type="primary" @click="submitForm(ruleFormRef)"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import { addBanner } from '@/api/banner'
export default {
  components: {
    Plus
  },
  data() {
    return {
      imageUrl: '', // 上传完毕的图片地址
      ruleFormRef: null,
      ruleForm: {
        img: '', // 图片的地址
        alt: '', // 图片说明
        link: '' // link
      },
      rules: {
        img: [{ required: true, message: '请上传图片...', trigger: 'blur' }],
        alt: [{ required: true, message: '请输入alt', trigger: 'blur' }],
        link: [{ required: true, message: '请输入link', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.ruleFormRef = this.$refs.formRef
  },
  methods: {
    httpRequest(data) {
      // 限制文件类型，必须是图片类型
      const typeRight = ['image/jpeg', 'image/jpg', 'image/png'].includes(
        data.file.type
      )
      // 限制图片大小
      const sizeRight = data.file.size / 1024 / 1024 < 2
      if (!typeRight) {
        ElMessage.error('文件类型不正确')
        return false
      } else if (!sizeRight) {
        ElMessage.error('图片大小高于2M')
        return false
      }
      // console.log('data--->', data)
      this.imageUrl = URL.createObjectURL(data.file)
      // 获取文件的base64位
      this.getBase64(data.file).then((res) => {
        this.ruleForm.img = res
      })
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        reader.onload = () => {
          fileResult = reader.result
        }
        reader.onerror = (err) => {
          reject(err)
        }
        reader.onloadend = () => {
          resolve(fileResult)
        }
      })
    },
    submitForm(formEl) {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          addBanner(this.ruleForm).then(() => {
            this.$router.push({ name: 'bannerlist' })
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon {
  width: 50px;
  height: 50px;
  background: #fff;
}
</style>
